<template>
	<view class="logon">
		<view class="list">
			<view class="list-call">
				<input class="phone"  type="phone" v-model="phone" maxlength="11" placeholder-style="color:#CCCCCC" placeholder="请输入手机号" />
				
				<view @tap="getPhoneCode" v-bind:class="[isTrue ? 'getCodeBtn' : 'unGet']">
					{{phoneCode}}
				</view>
			</view>
			<view class="list-call">
				<input class="biaoti" type="number"  v-model="code" maxlength="6" placeholder-style="color:#CCCCCC"
				 placeholder="请输入验证码"/>
			</view>
			<!-- <view class="list-call">
				<input class="biaoti" type="text"  v-model="invite" maxlength="6" placeholder-style="color:#CCCCCC"
				 placeholder="邀请码(选填)"/>
			</view> -->
			<!-- <view class="list-call">
				<input class="biaoti" type="password"  v-model="pwd" maxlength="20" placeholder-style="color:#CCCCCC"
				 placeholder="请输入密码"/>
				
			</view> -->
			<!-- <text class="desction">5-20个字母、数字以及标点符号（除空格）,字母、数字和标点符号至少包含2种</text> -->
		</view>
		<view class="btn" @tap="login">
			同意协议并绑定
		</view>
	
		<view class="bottom">
			查看 <text @tap="goAgreeement(1)">《平台服务协议》</text> <text  @tap="goAgreeement(2)">《隐私权政策》</text>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phoneCode:"获取验证码",
				isTrue:true,
				phone:"",
				invite:"",
				pwd:"",
				openId:""
			}
		},
		onLoad(e) {
			this.openId = e.openId;
		},
		methods: {
			login(){
				if(this.phone.length == 0){
					uni.showToast({
						 title: '请输入手机号码',
						 icon: 'none'
					})
					return false;
				}else if(!(/^1[3456789]\d{9}$/.test(this.phone))){ 
							uni.showToast({
								 title: '请输入正确得手机号',
								 icon: 'none'
							})
					        return false; 
				}else if(this.code.length == 0){
					uni.showToast({
						 title: '请输入验证码',
						 icon: 'none'
					})
					return false;
				}else{
					let data = {
						wxOpenid:this.openId, //微信
						byteDanceOpenId:this.openId, //头条
						aliUserId:this.openId,
						code:this.code,
						mobile: this.phone,
						nickName:uni.getStorageSync('nickName'),
						logo:uni.getStorageSync('userLogo'),
					}
					this.$http.post('/api/v1.0/appletBindMobile',data,res=>{
						
						if(res.data.status == '000000'){
							uni.showToast({
								 title: '绑定成功'
							})
							uni.setStorage({
								key:'userId',
								data:res.data.data.userId,
							})
							uni.setStorage({
								key:'token',
								data:res.data.data.token,
							})
							uni.setStorage({
								key:'nickName',
								data:res.data.data.nickName,
							})
							uni.setStorage({
								key:'buyerAccountId',
								data:res.data.data.buyerAccountId,
							})
							uni.setStorage({
								key:'userLogo',
								data:res.data.data.logo,
							})
							uni.setStorage({
								key:'wxOpenid',
								data:res.data.data.wxOpenid,
							})
							
							uni.switchTab({
								url:"../index/index"
							})
							
						}else{
							uni.showToast({
								 title: res.data.message,
								 icon:"none"
							})
						}
					})   
					
				}
			},
			getPhoneCode(){
				if(this.phone.length == 0){
					uni.showToast({
						 title: '请输入手机号码',
						 icon: 'none'
					})
					return false;
				}else{
					if(!(/^1[3456789]\d{9}$/.test(this.phone))){ 
							uni.showToast({
								 title: '请输入正确得手机号',
								 icon: 'none'
							})
					        return false; 
					   } else{
						   if(this.isTrue == true){
						   	this.phoneCode = '60s'
						   	let time = 60;
						   	this.isTrue = false;
						   	var _this = this;
						   	var timer = setInterval(function(){
						   		time--
						   		_this.phoneCode = time+'s'
						   		if(time == 0){
						   			clearInterval(timer)
						   			_this.phoneCode = '获取验证码';
						   			_this.isTrue = true;
						   		}
						   	},1000)
						   }
						   let data = {
							   type:2,
							   mobile:this.phone
						   }
						   this.$http.post(this.$http.baseUrl + '/api/v1.0/sendMessage',data,res=>{
							   console.log(res.data)
							   if(res.data.status == '000000'){
								   uni.showToast({
								   	 title: '验证码已发送，请注意',
								   	 icon: 'none'
								   })
							   }
						   } )
					   }
				}
				
			},
			goAgreeement(num){
				uni.navigateTo({
					url:'/pages/agreement/agreement?type=' + num
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.list {
		display: flex;
		flex-direction: column;
		padding-top: 50upx;
		padding-left: 70upx;
		padding-right: 70upx;

		.list-call {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			height: 100upx;
			color: #333333;
			font-size: 28upx;
			border-bottom: 1upx solid rgba(217,217,217,1);

			.img {
				width: 40upx;
				height: 40upx;
			}
			.phone{
				padding-left: 16upx;
				width: 60%;
			}
			.getCodeBtn{
				color: #EA4E39;
				float: right;
				margin-right: 20upx;
			}
			.unGet{
				color: #D9D9D9;
				float: right;
				margin-right: 20upx;
			}
			.biaoti {
				flex: 1;
				text-align: left;
				line-height: 100upx;
				padding-left: 16upx;
			}
		}
	}
	.desction{
		font-size: 22upx;
		color: #ccc;
	}
	.btn{
		width:616upx;
		height:88upx;
		background:linear-gradient(360deg,rgba(227,67,57,1) 0%,rgba(249,98,58,1) 100%);
		border-radius:20upx;
		font-size:36upx;
		color:rgba(255,255,255,1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 50upx auto 30upx;
	}
	.uni-text{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding:0 70upx;
		font-size:24upx;
		font-weight:500;
		color:rgba(77,77,77,1);
	}
	.logon{
		position: relative;
		height: 100vh;
		.bottom{
			position: absolute;
			bottom: 62upx;
			width: 100%;
			text-align: center;
			font-size: 24upx;
			color: #4D4D4D;
			text{
				color: #5E85C5;
			}
		}
	}
</style>
